new Vue({
  el: '#app',
  data() {
    return {
      title: 'vue数据联动',
      //班级的数据
      clist: [],
      //选中的班级编号
      cid: -1,
      // 学生的数据
      slist: [],
      sid: -1,
    };
  },
  methods: {
    queryAllClass() {
      let app = this;
      //查询学生信息
      ajax('/linkinfo/queryAllClass', {}, function (data) {
        if (!data.success) {
          alert(data.message);
          return;
        }
        //处理班级的数据
        app.clist = data.list;
        if (app.clist.length <= 0) {
          alert('没有数据');
          return;
        }
        // 设置默认选中项，只需要对对应的model进行赋值即可
        app.cid = app.clist[0].cid;
        // 班级变化要调用学生查询
        app.queryStudentByClass();
      });
    },
    queryStudentByClass() {
      let app = this;
      ajax(
        '/linkinfo/queryStudentByClass',
        {
          cid: app.cid,
        },
        function (data) {
          if (!data.success) {
            alert(data.message);
            return;
          }
          app.slist = data.list;
          if (app.slist.length > 0) {
            app.sid = app.slist[0].sid;
          }
        }
      );
    },
  },
  computed: {
    StudentByClass() {
      for (let i = 0; i < this.slist.length; i++) {
        if (this.sid == this.slist[i].sid) {
          return this.slist[i];
        }
      }
      return {};
    },
    cname() {
      //clist里面是全部的学生信息
      //通过cid可以获取选中的学生编号
      let cname = {};
      for (let i = 0; i < this.clist.length; i++) {
        //搜索和sid匹配数据，就是选中完整学生信息
        if (this.cid == this.clist[i].cid) {
          return this.clist[i];
        }
      }
      return cname;
    },
  },
  created() {
    // vue创建成功后就调用查询数据的方法
    this.queryAllClass();
  },
});

new Vue({
  el: '#ap',
  data() {
    return {
      title: 'vue数据联动',
      //部门的数据
      dlist: [],
      //选中的部门编号
      deptId: -1,
      // 员工的数据
      blist: [],
      employeeId: -1,
    };
  },
  methods: {
    queryAllDept() {
      let ap = this;
      //查询部门信息
      ajax('/linkinfo/queryAllDept', {}, function (data) {
        if (!data.success) {
          alert(data.message);
          return;
        }
        //处理员工的数据
        ap.dlist = data.list;
        if (ap.dlist.length <= 0) {
          alert('没有数据');
          return;
        }
        // 设置默认选中项，只需要对对应的model进行赋值即可
        ap.deptId = ap.dlist[0].deptId;
        // 部门变化要调用员工查询
        ap.queryEmployeeByDept();
      });
    },
    queryEmployeeByDept() {
      let ap = this;
      ajax(
        '/linkinfo/queryEmployeeByDept',
        {
          deptId: ap.deptId,
        },
        function (data) {
          if (!data.success) {
            alert(data.message);
            return;
          }
          ap.blist = data.list;
          if (ap.blist.length > 0) {
            ap.employeeId = ap.blist[0].employeeId;
          }
        }
      );
    },
  },
  computed: {
    EmployeeByDept() {
      for (let i = 0; i < this.blist.length; i++) {
        if (this.bid == this.blist[i].bid) {
          return this.blist[i];
        }
      }
      return {};
    },
    deptName() {
      //dlist里面是全部的部门信息
      //通过did可以获取选中的部门编号
      let deptName = {};
      for (let i = 0; i < this.dlist.length; i++) {
        //搜索和pid匹配数据，就是选中完整省份信息
        if (this.did == this.dlist[i].did) {
          return this.dlist[i];
        }
      }
      return deptName;
    },
  },
  created() {
    // vue创建成功后就调用查询数据的方法
    this.queryAllDept();
  },
});
